<template>
 <div class="custom-dialog-wrapper">
      <div class="custom-dialog">
        <div class="dialog-header">
          <slot name="header">修改密码</slot>
        </div>
        <div class="dialog-body">
          <p>原密码：</p>
          <el-input type="password" v-model="oldPassword" placeholder="请输入原密码"></el-input>
          <p>新密码：</p>
          <el-input type="password" v-model="newPassword" placeholder="请输入新密码"></el-input>
          <p>确认密码：</p>
          <el-input type="password" v-model="confirmPassword" placeholder="请确认新密码"></el-input>
        </div>
        <div class="dialog-footer">
          <el-button type="info" size="large" @click="onCancel">取消</el-button>
          <el-button type="primary" size="large" @click="onConfirm">确认</el-button>
        </div>
      </div>
    </div>
</template>


<script lang="ts" setup>
import { ref, defineEmits} from 'vue'
import { type IUser } from '../views/pages/Register.vue'

const emit = defineEmits(['cancel', 'confirm'])

const oldPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')

// 账号信息
const user = ref(JSON.parse(localStorage.getItem('user') as string))
const users = ref(JSON.parse(localStorage.getItem('users') as string))

const onCancel = () => {                    // 取消按钮点击事件
    // 输入框内容清空
    oldPassword.value = ''
    newPassword.value = ''
    confirmPassword.value = ''
    // 关闭弹窗
    emit('cancel')
}                

const onConfirm = () => {                 // 确认按钮点击事件
    // 验证密码
    if(user.value.password !== oldPassword.value) {
        alert('原密码错误，请重新输入')
        return
    } else if (newPassword.value !== confirmPassword.value) {
        alert('两次输入的密码不一致，请重新输入')
        return
    } else {
        // 修改密码
        user.value.password = newPassword.value
        localStorage.setItem('user', JSON.stringify(user.value))
        users.value.forEach((item: IUser) => {
            if(item.username === user.value.username) {
                item.password = user.value.password
            }
        })
        localStorage.setItem('users', JSON.stringify(users.value))
        alert('密码修改成功')
        
    }
    // 输入框内容清空
    oldPassword.value = ''
    newPassword.value = ''
    confirmPassword.value = ''
    // 关闭弹窗
    emit('cancel')
}

</script>

<style scoped lang="scss">
 .custom-dialog-wrapper {
    /* 黑色蒙版 */
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  
  .custom-dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../assets/images/picture1.jpg');
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: 550px;
  }
  
  .dialog-header {
    font-size: 20px;
    margin-bottom: 10px;
    text-align: center;
    color: #f2d6c9;
    font-weight: bold;
  }
  
  .dialog-body {
    margin-bottom: 20px;
  }
  
  .dialog-body p {
    margin: 10px 0;
    font-size: 18px;
    color: #f2d6c9;
    font-weight: 600;
  }
  
  .dialog-footer {
    text-align: center;
    padding: 20px;
  }
  
  .el-button {
    width: 25%;
  }
  
  select {
    width: 150px;
    height: 30px;
    font-size: 15px;
    outline: none;
  }
  
  input {
    width: 100%;
    height: 30px;
    outline: none;
  }
</style>